<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page with 3D Background</title>
<style>
    body {
        margin: 0;
        padding: 0;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        perspective: 1000px;
        background: linear-gradient(45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
        background-size: 400% 400%;
        animation: gradient 15s ease infinite;
    }

    @keyframes gradient {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }

    .login-container {
        width: 25%;
        margin: 0 auto;
        margin-top: 100px;
        padding: 2%;
        border: 1px solid #cccccc;
        border-radius: 8px;
        background-color: rgba(255, 255, 255, 0.8);
        position: relative;
        z-index: 1;
    }

    input {
        display: block;
        width: 100%;
        margin-bottom: 10px;
        padding: 5px;
        border-radius: 3px;
        border: 1px solid #ccc;
    }

    #submit {
        width: 100%;
        padding: 10px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
</style>
</head>
<body>
<div class="login-container">
    <h3 style="text-align:center;">用户登录</h3>
    <form action="{% url 'dologin' %}" enctype="multipart/form-data" method="post">
        {% csrf_token %}
        <input type="text" name="username" placeholder="用户名" required />
        <input type="password" name="password" placeholder="密码" required />
        <input id="submit" type="submit" value="Login"/>
    </form>
	 <button onclick="location.href='{% url 'register' %}'">Go to Register</button>
</div>
</body>
</html>
